<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="js-bg" class="bg"></div>
  <div id="js-mask" class="mask"></div>
  <canvas id="js-canvas" class="image-canvas"></canvas>
  <div id="js-size-info" class="size-info"></div>
  <div id="js-toolbar" class="toolbar">
    <div class="iconfont icon-zhongzhi" id="js-tool-reset"></div>
    <div class="iconfont icon-xiazai" id="js-tool-save"></div>
    <div class="iconfont icon-guanbi" id="js-tool-close"></div>
    <div class="iconfont icon-duihao" id="js-tool-ok"></div>
  </div>
  <script>
  
    const { ipcRenderer, clipboard, nativeImage, remote, desktopCapturer, screen } = require('electron')
    const Event = require('events')
    const fs = require('fs')

    const { bounds: { width, height }, scaleFactor } = screen.getPrimaryDisplay()
    const $canvas = document.getElementById('js-canvas')
    const $bg = document.getElementById('js-bg')
    const $sizeInfo = document.getElementById('js-size-info')
    const $toolbar = document.getElementById('js-toolbar')

    const $btnClose = document.getElementById('js-tool-close')
    const $btnOk = document.getElementById('js-tool-ok')
    const $btnSave = document.getElementById('js-tool-save')
    const $btnReset = document.getElementById('js-tool-reset')

    console.time('capture')
    desktopCapturer.getSources({
      types: ['screen'],
      thumbnailSize: {
        width: width * scaleFactor,
        height: height * scaleFactor,
      }
    }, (error, sources) => {
      console.timeEnd('capture')
      let imgSrc = sources[0].thumbnail.toDataURL()

      let capture = new CaptureRenderer($canvas, $bg, imgSrc, scaleFactor)
    })
  </script>
</body>
</html>